<template>
  <div class="order">
    <navBar :title="title"></navBar>    
    <van-tabs
      v-model="active"
      animated
      :swipe-threshold="5"
      color="#16598B"
      title-active-color="#16598B"
      title-inactive-color="#303030"
      @change="onChange"
      :swipeable="true"
      :border="true"
    >      
      <van-tab>
        <div slot="title" class="tab_title">全部</div>
        <div slot="default">          
        </div>
      </van-tab>
      <van-tab>
        <div slot="title" class="tab_title">待付款</div>
        <div slot="default">         
        </div>
      </van-tab>
      <van-tab>
        <div slot="title" class="tab_title">待配送</div>
        <div slot="default">
        </div>
      </van-tab>
      <van-tab>
        <div slot="title" class="tab_title">待收货</div>
        <div slot="default">          
        </div>
      </van-tab>
      <van-tab>
        <div slot="title" class="tab_title">待评价</div>
        <div slot="default">          
        </div>
      </van-tab>
    </van-tabs>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">      
      <orderItem v-for="(item, index) in list" :key="index" :goods="item"></orderItem>
      <noOrder :noOrder="list.length == 0" :record="record" :productList="productList" :refresh="refResh"></noOrder>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Tab, Tabs, PullRefresh } from "vant";
Vue.use(Tab)
  .use(Tabs)
  .use(PullRefresh);
import navBar from "components/navBar";
import noOrder from "components/noOrder";
import orderItem from "@/components/orderItem";
import { orderStatus } from "src/utils/order";
export default {
  data() {
    return {
      title: "全部订单",
      active: this.$route.query.active,
      tabList: ["全部", "待付款", "待配送", "待收货", "待评价"],
      productList: [],
      isLoading: false,
      record: false,
      list:[],
      page: {
        nowPage: 0
      }
    };
  },
  mounted(){
    this.getList();
    this.getRec();
  },
  computed:{
    statusConfig(){
      return {
        '0': 'ALL',
        '1': 'WAITPAY',
        '2': 'WAITSEND',
        '3': 'WAITRECEIVE',
        '4': 'WAITCCOMMENT',
      }
    },
    statusStr(){
      return this.statusConfig[this.active] || 'ALL'
    }
  },
  watch:{
    active(){
      this.refResh()
    },
    '$route.query.active'(v){
      this.active = v
    }
  },
  methods: {
    getList(){
      this.$store.dispatch('orderList', {
        type: this.statusStr,
        p: this.page.nowPage + 1
      }).then(res=>{
        console.log('orderList', res);
        this.list = this.list.concat(res.data.result.list)
        this.page = res.data.result.page
        this.isLoading = false;
      }).catch(res=>{
        this.isLoading = false;
      })
    },
    getRec(){
      this.$store.dispatch('recommand',{}).then(res=>{
        this.productList = res.data.result.list
      }).catch(e=>{

      })
    },
    refResh(){
      this.page = {
        nowPage: 0
      }
      this.list = []
      this.getList()
    },
    onChange(index) {
      console.log(index);
    },
    onRefresh() {
      this.refResh()
    },
    setOrderStatus(status) {
      return orderStatus(status);
    },
    setTime(time) {
      return orderStatus(time);
    }
  },
  components: {
    navBar,
    noOrder,
    orderItem
  }
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.tab_title {
  font-size: 11px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
}
</style>
